<template>
    <div class="create-point">
      <el-card class="box-card"  style="background-color: #3C3F41; color: #9E9F9F; height: 595px; overflow: scroll">
        <div slot="header" class="clearfix">
          <span>点位文件生成测试</span>
          <el-button style="float: right;margin-right: 10px" type= "text" @click="createFile" v-loading="createFileLoading">生成文件</el-button>
          <el-button type="text" style="float: right;margin-right: 10px" @click="showFile">读取文件</el-button>
          <el-button type="text" style="float: right;margin-right: 10px" @click="clearFile">清空</el-button>
          <el-button type="text" style="float: right;margin-right: 10px" @click="uploadFile">上传文件</el-button>
        </div>
        <p v-for="line in showText" style="text-align: left">
          {{line}}
        </p>
      </el-card>
    </div>
</template>

<script>
    import axios from 'axios'
    import { mapState, mapMutations } from 'vuex'
    export default {
        name: "CreatePointAs",
        components:{

        },
        computed: {
          ...mapState([
            'showText',
            'ws',
            'createFileLoading',
          ])
        },
        data(){
          return{
            content: ""
          }
        },
        methods: {
          ...mapMutations([
            'clearShowText'
          ]),
          createFile(){
            this.ws.send("createFile")
            this.createFileLoading = true
          },
          showFile(){
            this.ws.send("showFile")
          },
          clearFile(){
            this.clearShowText()
          },
          uploadFile(){
            axios
              .get("http://127.0.0.1:8000/test/upload_file")
              .then(res=>{
                if (res.data){
                  this.$message({
                    message: "上传成功",
                    type: "success",
                  })
                }else {
                  this.$message({
                    message: "上传失败",
                    type: "error",
                  })
                }
              })
          },
        },
    }
</script>

<style scoped>

</style>
